﻿function picturehelper(picturesObj, form, picturesInput) {
    //Init Picture Tab
    $(".connectedSortable").sortable().disableSelection();
    var $ptabs = $("#ptabs").tabs(); 
    $ptabs.addClass('ui-tabs-vertical ui-helper-clearfix');
    $("#ptabs li").removeClass('ui-corner-top').addClass('ui-corner-left');

    var $tab_items = $("ul:first li", $ptabs).droppable({
        accept: ".connectedSortable li",
        hoverClass: "ui-state-hover",
        drop: function (event, ui) {
            var $item = $(this);
            var $list = $($item.find("a").attr("href"))
					.find(".connectedSortable");
            ui.draggable.hide("slow", function () {
                $ptabs.tabs("select", $tab_items.index($item));
                $(this).appendTo($list).show("slow");
            });
        }
    });

    if (form) {
        form.submit(function () {
   
            var pictures = [];

            $(".connectedSortable").each(function () {
                var typeId = $(this).attr("pictureType");

                $("li", this).each(function () {
                    var url = $(this).attr("url");
                    if (url) {
                        var picture = {
                            "EnumCategory": typeId,
                            "URL": url,
                            "Name": $(this).attr("title"),
                            "IsDefault": $(this).attr("asdefault")
                        };

                        pictures.push(picture);
                    }
                });
            });

            picturesInput.val(JSON.stringify(pictures));
        });
    }

    var pictures = picturesObj;
    if (pictures && pictures != null) {
        $.each(pictures, function (number) {
            var rawPicture = pictures[number];
            var picture = {
                "url": rawPicture.URL,
                "title": rawPicture.Name,
                "asdefault": rawPicture.IsDefault,
                "typeId": rawPicture.EnumCategory
            };

            MakePictureRow(picture, $(".connectedSortable[pictureType=" + picture.typeId + "]"));
        });
    }
}

//Append picture item after uploaded
var MakePictureItem = function (url, title, asdefault) {
    var picture = {
        "url": url,
        "title": title,
        "asdefault": asdefault
    };
    MakePictureRow(picture);
}

var MakePictureRow = function (picture, currentSortable) {
    var path = picture.url;
    var thumPath = GetThumPath(path);
    var div = $("<li class='ui-state-default'  url='" + path + "' title='" + picture.title + "' asdefault=" + picture.asdefault + "/>");
    var value = $("<input name='Picture' type='hidden' value='" + path + "' />");
    var img = $("<img src='" + thumPath + "' />");
    var titleText = $("<div style='width:100px; overflow:hidden; white-space:nowrap'>" + picture.title + "</div>");
    var br = "</br>";
    var view = $('<li class="ui-state-default ui-corner-all" title="查看大图"><span class="ui-icon ui-icon-newwin"></span></li>');
    var del = $('<li class="ui-state-default ui-corner-all" title="删除图片"><span class="ui-icon ui-icon-closethick"></span></li>');
    var edit = $('<li class="ui-state-default ui-corner-all" title="编辑标题"><span class="ui-icon ui-icon-pencil"></span></li>');
    var asDefalut = $('<li class="ui-state-default ui-corner-all asDefalut" title="置为主图片"><span class="ui-icon ui-icon-arrowthick-1-n"></span></li>');
    var title = $('<input type="text" style="position:absolute;" value="' + picture.title + '"/>');
    var moveLeft = $("<a href='#' style='display:none'>|左移</a>");
    var moveRight = $("<a href='#' style='display:none'>|右移</a>");

    var row = div.append(value).append(img)
                                    .append(titleText)
                                    .append(view).append(del).append(asDefalut).append(edit).append(moveLeft).append(moveRight)
                                    .append(br).append(title);

    title.hide();
    title.blur(function () {
        title.hide();
        titleText.html(title.val());
        $(".connectedSortable").sortable().disableSelection();
    });
    title.focus(function () {
        $(".connectedSortable").sortable().enableSelection();
    });
    title.change(function () {
        $(this).parent().attr("title", $(this).val());
    });
    edit.click(function () {
        title.show();
        title.focus();
    });

    asDefalut.click(function () {
        $(".asDefalut").each(function () {
            $(this).removeClass("ui-state-active");
            $(this).addClass("ui-state-default");
            $(this).parent().attr("asdefault", "false");
        });

        $(this).removeClass("ui-state-default");
        $(this).addClass("ui-state-active");
        $(this).parent().attr("asdefault", "true");
    });

    if (picture.asdefault && picture.asdefault == true)
        asDefalut.click();

    var selectIndex = $("#ptabs").tabs("option", "selected");
    if (!currentSortable)
        currentSortable = $(".connectedSortable").eq(selectIndex);
    currentSortable.append(row);

    del.click(function () {
        div.remove();
    });

    view.click(function () {
        window.open(staticFileRoot + path);
    });

    moveRight.click(function () {
        div.insertAfter(div.next());
    });

    moveLeft.click(function () {
        div.prev().insertAfter(div);
    });

}

//Get thum picture 
var GetThumPath = function (path) {
    var ext = path.substring(path.lastIndexOf('.'));
    var head = path.substring(0, path.lastIndexOf('.'));
    return head + "_s" + ext;
}